<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/head.css" />
		<link rel="stylesheet" type="text/css" href="css/collection.css" />
		
	</head>

	<body>
		<div class="CHL_wrap">

			<!--头部-->
			<div class="CHL_head_wrap">
				<div class="CHL_head_wrap_img">
					<div class="CHL_head_wrap_img_top"><img src="img/管理游戏2/组 1.png" /></div>
					
					<div class="CHL_top">
						<div class="CHL_head_wrap_img_login">
							<a href="###"><img src="img/管理游戏2/图层 2.png"/></a></div>
						<div class="CHL_head_wrap_mobileGame">
							<span>我的收藏</span>
						</div>
						<div class="CHL_head_wrap_bianji">
							<span class="editor"><a href="collection.html">取消编辑</a></span>
						</div>
					</div>

				</div>

			</div>

			<div class="CHL_collection_wrap">
				<div class="CHL_game2_newtv">
					<div class="CHL_collection_newtvrap">

						<p class="movie"><a href="###">视频</a></p>
						<p class="wenzi"><a href="###">攻略</a></p>
						<div class="line"></div>

					</div>
				</div>
			
				<!--收藏视频列表-->
				<!--<div class="CHL_collection_shipin">-->
				<ul class="photo">
						<li>
							<div class="CHL_collection_greenimg">
								<!--竖线-->
								<img src="img/视屏/我的收藏/矩形 10 拷贝.png"/>
								<!--圆-->
								<img src="img/视屏/我的收藏/椭圆 1.png" />
								<!--L-->
								<img src="img/视屏/我的收藏/圆角矩形 2 拷贝 4.png" class="cir"/>
							</div>
							<div class="CHL_collection_shipinzombies">
								<p class="zombies">僵尸大战终极副本54关攻略关通关视频</p>
								<div class="CHL_collection_time">
									<span>更新时间 : </span>
									<span>2015.2.15</span>
								</div>
							</div>
							<div class="CHL_collection_shipinzombies2">
								取消收藏
							</div>
						</li>
						<li>
							<div class="CHL_collection_greenimg">
								<img src="img/视屏/我的收藏/矩形 10 拷贝.png" />
								<img src="img/视屏/我的收藏/椭圆 1.png" />
								<img src="img/视屏/我的收藏/圆角矩形 2 拷贝 4.png" class="cir"/>
							</div>
							<div class="CHL_collection_shipinzombies">
								<p class="zombies">僵尸大战终极副本54关攻略关通关视频</p>
								<div class="CHL_collection_time">
									<span>更新时间 : </span>
									<span>2015.2.15</span>
								</div>
							</div>
							<div class="CHL_collection_shipinzombies2">
								取消收藏
							</div>
						</li>
						<li>
							<div class="CHL_collection_greenimg">
								<img src="img/视屏/我的收藏/矩形 10 拷贝.png" />
								<img src="img/视屏/我的收藏/椭圆 1.png" />
								<img src="img/视屏/我的收藏/圆角矩形 2 拷贝 4.png" class="cir"/>
							</div>
							<div class="CHL_collection_shipinzombies">
								<p class="zombies">僵尸大战终极副本54关攻略关通关视频</p>
								<div class="CHL_collection_time">
									<span>更新时间 : </span>
									<span>2015.2.15</span>
								</div>
							</div>
							<div class="CHL_collection_shipinzombies2">
								取消收藏
							</div>
						</li>
					</ul>
				<div class="CHL_collection_generations">
					<input type="checkbox" class="choose"/>
					全选
				</div>
				<div class="CHL_collection_cancel">
					<div class="cancelchoose">取消选择</div>
					<div class="remove">一键取消收藏</div>
					
				</div>
			<!--	</div>-->
			</div>

			<!--底部-->
			<div class="CHL_foot_wrap">
				<div class="CHL_foot_wrap_parcel">
					<div class="CHL_foot_wrap_fir foot">
						<img src="img/管理游戏2/Home.png"/>
						
						<p>首页</p>
					</div>
					<div class="CHL_foot_wrap_two foot">
						<img src="img/首页/Play.png" />
						
						<p>视频</p>
					</div>
					<div class="CHL_foot_wrap_thr foot">
						<img src="img/首页/Tag.png" />
						
						<p>商城</p>
					</div>
					<div class="CHL_foot_wrap_four foot">
						<img src="img/首页/椭圆 17.png" />
						<p>我的</p>
					</div>
				</div>

			</div>
		</div>
	</body>
	<script type="text/javascript" src="js/touch-0.2.14.min.js"></script>
	<script type="text/javascript" src="js/jquery-2.2.4.min.js"></script>
	<script type="text/javascript">

		//点击换图片
		var boll = true;
		$(".cir").each(function(i,ele){
			$(ele).on("mousedown",function(){
				if(boll){
					$(this).prev().attr("src","img/视屏/我的收藏/椭圆 2 拷贝.png");
					$(this).addClass("red");
					boll = false;
					
				}else{
					$(this).prev().attr("src","img/视屏/我的收藏/椭圆 1.png");
					$(this).removeClass("red");
					boll = true;
				}
			});
			
		})
		//点击全选
		var booll = true;
		$(".choose").on("mousedown",function(){
			if (booll) {
				$(".cir").prev().attr("src","img/视屏/我的收藏/椭圆 2 拷贝.png");
				$(".cir").addClass("red");
				booll = false;
				console.log(0)
			}else{
				$(".cir").prev().attr("src","img/视屏/我的收藏/椭圆 1.png");
				$(".cir").removeClass("red");
				booll = true;
				console.log(1)
			}
		})
		//点击取消全选
		$(".cancelchoose").on("mousedown",function(){
			$(".cir").prev().attr("src","img/视屏/我的收藏/椭圆 1.png");
		})
		//点击删除
		$(".remove").on("mousedown",function(){
			$(".red").parent().parent().remove();
			if ($(".CHL_collection_wrap ul li").length==0) {
				$(".CHL_collection_generations").css("display","none")
				$(".CHL_collection_cancel").css("display","none")
			}else{
				$(".CHL_collection_generations").css("display","block")
				$(".CHL_collection_cancel").css("display","block")
			}
		})
		//点击视频攻略
		$(".movie").on("mousedown", function() {
			$(this).css("color", "rgb(217,42,42)");
			$(".wenzi").css("color", "black");
			$(".line").css({
				"display": "block",
				"left": "12%"
			})
		})
		$(".wenzi").on("mousedown", function() {
		
			$(this).css("color", "rgb(217,42,42)");
			$(".movie").css("color", "black");
			$(".line").css({
				"display": "block",
				"left": "59%"
			})
		})

		$(".CHL_collection_wrap ul li").each(function(i,ele) {
			
			touch.on($(ele),"swiperight swipeleft", function(e){
				
				var even = e || event;
				even.preventDefault();
				switch(even.type) {
					case "swiperight":
						$(ele).animate({
							left: "0"
						}, 200);
						break;
					case "swipeleft":
						$(ele).animate({
							left: "-20%"
						}, 200);
						break;
				}
			});
			$(ele).children().last().on("click", function() {
				$(this).parent().remove();
			});
		});
		
		
	</script>

</html>